<template>
  <div class="app-car-container">
    <CustomContent>
      <template v-slot:body>
        <el-tabs type="card">
          <el-tab-pane label="基本信息">
            <el-row>
              <el-col :sm="24" >
                <MmvTitle title="车辆信息"></MmvTitle>
              </el-col>
              <el-col :sm="24"  class="table-padding">
                <el-descriptions
                  class="margin-top margin-bottom"
                  :column="2"
                  border
                >
                  <el-descriptions-item label-class-name="my-descriptions-label"  span="2">
                    <template slot="label"> 品牌/车系/车型</template>
                    {{
                      form.carBrandName?(form.carBrandName +
                      '/' +
                      form.carSeriesName +
                      '/' +
                      form.carModelName):'--'
                    }}
                  </el-descriptions-item>
                  <el-descriptions-item label-class-name="my-descriptions-label" >
                    <template slot="label"> 归属门店</template>
                    {{ form.belongingStoreName }}
                  </el-descriptions-item>
                  <el-descriptions-item label-class-name="my-descriptions-label" >
                    <template slot="label"> 停靠门店</template>
                    {{ form.locatedStoreName }}
                  </el-descriptions-item>
                  <el-descriptions-item label-class-name="my-descriptions-label" >
                    <template slot="label"> 当前里程/Km</template>
                    {{ form.useMileage }}
                  </el-descriptions-item>
                  <el-descriptions-item label-class-name="my-descriptions-label" >
                    <template slot="label"> 保养周期/Km</template>
                    {{ form.maintenanceCycle }}
                  </el-descriptions-item>
                </el-descriptions>
              </el-col>
            </el-row>

            <el-row>
              <el-col :sm="24">
                <MmvTitle title="行驶证信息"></MmvTitle>
              </el-col>
              <el-col :sm="24"  class="table-padding">
                <el-descriptions
                  class="margin-top margin-bottom"
                  :column="1"
                  border
                >
                  <el-descriptions-item label-class-name="my-descriptions-label" >
                    <template slot="label"> 车牌号</template>
                    {{ form.carNo }}
                  </el-descriptions-item>
                  <el-descriptions-item label-class-name="my-descriptions-label" >
                    <template slot="label"> 车架号</template>
                    {{ form.vinNo }}
                  </el-descriptions-item>
                  <el-descriptions-item label-class-name="my-descriptions-label" >
                    <template slot="label"> 发动机号</template>
                    {{ form.engineNo }}
                  </el-descriptions-item>
                  <el-descriptions-item label-class-name="my-descriptions-label" >
                    <template slot="label"> 注册日期</template>
                    {{ form.drivingLicenseValidityDate }}
                  </el-descriptions-item>
                  <el-descriptions-item label-class-name="my-descriptions-label" >
                    <template slot="label"> 行驶证照片</template>
                    <el-image
                      v-if="form.drivingLicenseImgFront"
                      :src="getImgUrl(form.drivingLicenseImgFront)"
                      :preview-src-list="[
                        getImgUrl(form.drivingLicenseImgFront),
                      ]"
                      fit="cover"
                      style="width: 10%; height: 10%"
                    ></el-image>
                    <el-empty v-else description="未上传行驶证照片"></el-empty>
                  </el-descriptions-item>
                </el-descriptions>
              </el-col>
            </el-row>

            <el-row>
              <el-col :sm="24"
                ><MmvTitle title="车辆设备信息"></MmvTitle
              ></el-col>
              <el-col :sm="24"  class="table-padding">
                <el-descriptions
                  class="margin-top margin-bottom"
                  :column="1"
                  border
                >
                  <el-descriptions-item label-class-name="my-descriptions-label" >
                    <template slot="label"> 设备编号</template>
                    {{ form.deviceNo }}
                  </el-descriptions-item>
                  <el-descriptions-item label-class-name="my-descriptions-label" >
                    <template slot="label"> SIM卡号</template>
                    {{ form.simCard }}
                  </el-descriptions-item>
                  <el-descriptions-item label-class-name="my-descriptions-label" >
                    <template slot="label"> 供应商</template>
                    <dict-tag
                      :options="dict.type.manufacturer"
                      :value="form.manufacturer"
                    />
                  </el-descriptions-item>
                  <el-descriptions-item label-class-name="my-descriptions-label" >
                    <template slot="label"> 设备型号</template>
                    <dict-tag
                      :options="dict.type.equipmentModel"
                      :value="form.equipmentModel"
                    />
                  </el-descriptions-item>
                  <el-descriptions-item label-class-name="my-descriptions-label" >
                    <template slot="label" span="2"> 设备类型</template>
                    <el-radio
                      v-model.number="form.deviceKind"
                      :label="1"
                      disabled
                      >有线</el-radio
                    >
                    <el-radio
                      v-model.number="form.deviceKind"
                      :label="2"
                      disabled
                      >无线</el-radio
                    >
                  </el-descriptions-item>
                </el-descriptions>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane
            label="保险信息"
            v-if="checkPermi(['car:basic:insurance'])"
          >
            <el-row>
              <el-col :span="24"
                ><MmvTitle title="商业险信息"></MmvTitle
              ></el-col>
              <el-col
                :sm="24"
                :md="18"
                :lg="16"
                v-if="form.syNo"
                class="table-padding"
              >
                <el-image
                  v-if="form.syPolicy"
                  :src="getImgUrl(form.syPolicy)"
                  :preview-src-list="[getImgUrl(form.syPolicy)]"
                  fit="cover"
                  style="width: 10%; height: 10%"
                ></el-image>
                <el-empty v-else description="未上传保单照片"></el-empty>
              </el-col>
              <el-col :sm="24" :md="24" :lg="20" v-else class="table-padding">
                <el-empty description="暂未投保"></el-empty>
              </el-col>
              <el-col :span="24"
                ><MmvTitle title="交强险保单"></MmvTitle
              ></el-col>
              <el-col
                :sm="24"
                :md="18"
                :lg="16"
                v-if="form.jqNo"
                class="table-padding"
              >
                <el-image
                  v-if="form.syPolicy"
                  :src="getImgUrl(form.syPolicy)"
                  :preview-src-list="[getImgUrl(form.syPolicy)]"
                  fit="cover"
                  style="width: 10%; height: 10%"
                ></el-image>
              </el-col>
              <el-col :sm="24" :md="24" :lg="20" v-else class="table-padding">
                <el-empty description="暂未投保"></el-empty>
              </el-col>

              <el-col :sm="24" :md="24" :lg="20" class="table-padding">
                <el-descriptions
                  class="margin-top margin-bottom"
                  :column="1"
                  border
                >
                  <el-descriptions-item label-class-name="my-descriptions-label" >
                    <template slot="label"> 保险公司</template>
                    {{ form.syCompany }}
                  </el-descriptions-item>
                  <el-descriptions-item label-class-name="my-descriptions-label" >
                    <template slot="label"> 保单号</template>
                    {{ form.syNo }}
                  </el-descriptions-item>
                  <el-descriptions-item label-class-name="my-descriptions-label" >
                    <template slot="label"> 总保费</template>
                    {{ form.syPremium }}
                  </el-descriptions-item>
                  <el-descriptions-item label-class-name="my-descriptions-label" >
                    <template slot="label"> 保险开始日期</template>
                    {{ form.syStartTime }}
                  </el-descriptions-item>
                  <el-descriptions-item label-class-name="my-descriptions-label" >
                    <template slot="label"> 保险截止日期</template>
                    {{ form.syEndTime }}
                  </el-descriptions-item>
                </el-descriptions>
              </el-col>
              <el-col
                :sm="24"
                :md="18"
                :lg="16"
                v-if="checkPermi(['car:basic:insurance'])"
              >
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="维保信息">
            <el-row>
              <el-col
                :sm="24"
                v-if="checkPermi(['car:basic:repair'])"
              >
                <MmvTitle title="车辆维修记录"></MmvTitle>
              </el-col>
              <el-col
                :sm="24"
                class="table-padding"
                v-if="checkPermi(['car:basic:repair'])"
              >
                <el-table v-loading="loading" :data="repairList" border>
                  <el-table-column
                    label="维修状态"
                    align="center"
                    prop="repairStatus"
                  >
                    <template slot-scope="scope">
                      <dict-tag
                        :options="dict.type.repair_status"
                        :value="scope.row.repairStatus"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="维修厂名称"
                    align="center"
                    prop="serviceName"
                  />
                  <el-table-column
                    label="送车时间"
                    align="center"
                    prop="repairStartDate"
                    width="180"
                  />
                  <el-table-column
                    label="取车时间"
                    align="center"
                    prop="repairEndDate"
                    width="180"
                  />
                  <el-table-column
                    label="维修费用合计"
                    align="center"
                    prop="totalPay"
                  />
                  <el-table-column
                    label="付款方"
                    align="center"
                    prop="payer"
                  >
                    <template slot-scope="scope">
                      <dict-tag :options="dict.type.repair_maintain_payer" :value="scope.row.payer" />
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="维保项目"
                    align="center"
                    prop="maintainRemark"
                    :show-overflow-tooltip="true"
                  />
                  <el-table-column
                    label="关联订单"
                    align="center"
                    prop="orderNo"
                    :show-overflow-tooltip="true"
                  />
                  <el-table-column
                    label="维保附件"
                    align="center"
                    prop="orderNo"
                  >  <template slot-scope="scope">
                    <el-image  v-if="scope.row.url"
                      :src="scope.row.url"
                      :preview-src-list="scope.row.imgList">
                    </el-image>
                  </template>
                  </el-table-column>
                  <el-table-column
                    label="备注"
                    align="center"
                    prop="remark"
                    :show-overflow-tooltip="true"
                  />
                  <el-table-column
                    label="记录人"
                    align="center"
                    prop="updateName"
                  />
                </el-table>
                <pagination
                  v-show="repair.total > 0"
                  :total="repair.total"
                  :page.sync="repair.pageNum"
                  :limit.sync="repair.pageSize"
                  @pagination="getRepairList"
                />
              </el-col>
            </el-row>
            <el-row>
              <el-col
                :sm="24"
                v-if="checkPermi(['car:basic:maintenance'])"
              >
                <MmvTitle title="车辆保养记录"></MmvTitle>
              </el-col>
              <el-col
                :sm="24"
                v-if="checkPermi(['car:basic:maintenance'])"
                class="table-padding"
              >
                <el-table v-loading="loading" :data="maintenanceList" border>
                  <el-table-column
                    label="维修状态"
                    align="center"
                    prop="repairStatus"
                  >
                    <template slot-scope="scope">
                      <dict-tag
                        :options="dict.type.repair_status"
                        :value="scope.row.repairStatus"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="维修厂名称"
                    align="center"
                    prop="serviceName"
                  />
                  <el-table-column
                    label="保养时公里数"
                    prop="currentMile"
                    align="center"
                  >
                    <template slot-scope="scope">
                      {{ scope.row.currentMile || '--' }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="送车时间"
                    align="center"
                    prop="repairStartDate"
                    width="180"
                  />
                  <el-table-column
                    label="取车时间"
                    align="center"
                    prop="repairEndDate"
                    width="180"
                  />
                  <el-table-column
                    label="维修费用合计"
                    align="center"
                    prop="totalPay"
                  />
                  <el-table-column
                    label="付款方"
                    align="center"
                    prop="payer"
                  >
                    <template slot-scope="scope">
                      <dict-tag :options="dict.type.repair_maintain_payer" :value="scope.row.payer" />
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="维保项目"
                    align="center"
                    prop="maintainRemark"
                    :show-overflow-tooltip="true"
                  />
                  <el-table-column
                    label="关联订单"
                    align="center"
                    prop="orderNo"
                    :show-overflow-tooltip="true"
                  />
                  <el-table-column
                    label="维保附件"
                    align="center"
                    prop="orderNo"
                  >  <template slot-scope="scope">
                    <el-image  v-if="scope.row.url"
                      :src="scope.row.url"
                      :preview-src-list="scope.row.imgList">
                    </el-image>
                  </template>
                  </el-table-column>
                  <el-table-column
                    label="备注"
                    align="center"
                    prop="remark"
                    :show-overflow-tooltip="true"
                  />
                  <el-table-column
                    label="记录人"
                    align="center"
                    prop="updateName"
                  />
                </el-table>
                <pagination
                  v-show="maintenance.total > 0"
                  :total="maintenance.total"
                  :page.sync="maintenance.pageNum"
                  :limit.sync="maintenance.pageSize"
                  @pagination="getMaintenanceList"
                />
              </el-col>
            </el-row>
            <el-row>
              <el-col
                :sm="24"
                v-if="checkPermi(['car:basic:inspection'])"
              >
                <MmvTitle title="车辆年检记录"></MmvTitle>
              </el-col>
              <el-col
                :sm="24"
                v-if="checkPermi(['car:basic:inspection'])"
                class="table-padding"
              >
                <el-table v-loading="loading" :data="insuranceList" border>
                  <el-table-column
                    label="年检年份"
                    align="center"
                    prop="thisTimeInspectionTime"
                  >
                    <template slot-scope="scope">
                      <span>{{
                        scope.row.thisTimeInspectionTime | inspectionYear
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="年检时间"
                    align="center"
                    prop="thisTimeInspectionTime"
                    width="200"
                  >
                    <template slot-scope="scope">
                      <span
                        >{{
                          parseTime(
                            scope.row.thisTimeInspectionTime,
                            '{y}-{m}-{d}'
                          ) || '--'
                        }}至{{
                          parseTime(
                            scope.row.nextInspectionTime,
                            '{y}-{m}-{d}'
                          ) || '--'
                        }}
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="年检费用"
                    align="center"
                    prop="inspectionAmount"
                  />
                  <el-table-column
                    label="年检处理人"
                    align="center"
                    prop="inspectionAgent"
                  />
                </el-table>
                <pagination
                  v-show="insurance.total > 0"
                  :total="insurance.total"
                  :page.sync="insurance.pageNum"
                  :limit.sync="insurance.pageSize"
                  @pagination="getListInspection"
                />
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="订单记录">
            <el-row>
              <el-col :sm="24">
                <MmvTitle title="车辆订单记录"></MmvTitle>
              </el-col>
              <el-col :sm="24" class="table-padding">
                <el-table v-loading="loading" :data="orderlist" border>
                  <el-table-column
                    label="订单号"
                    min-width="180"
                    align="center"
                    show-overflow-tooltip
                  >
                    <template slot-scope="{ row }">
                      <el-button
                        type="text"
                        style="font-size: 14px"
                        size="small"
                        @click="handleOrderDetail(row)"
                      >
                        {{ row.orderNo }}
                      </el-button>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="承租人"
                    min-width="180"
                    align="center"
                    show-overflow-tooltip
                  >
                    <template slot-scope="{ row }">
                      <span>{{ row.memberName }}</span>
                      <span>{{ row.memberPhone }}</span>
                      <span v-if="row.memberType">
                        <dict-tag
                          style="display: inline-block"
                          :options="dict.type.memberType"
                          :value="row.memberType"
                        />
                        客户
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="预计取还时间"
                    align="center"
                    min-width="180"
                    show-overflow-tooltip
                  >
                    <template slot-scope="{ row }">
                      <span style="color: #d9001b">
                        取：{{ row.rentalStartTime }}
                      </span>
                      <span style="color: #dd5d1b">
                        还：{{ row.rentalEndTime }}
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="租期"
                    align="center"
                    min-width="180"
                    show-overflow-tooltip
                  >
                    <template slot-scope="{ row }">
                      <span>{{ row.leaseDays }}天</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="取还车门店"
                    min-width="150"
                    align="center"
                    show-overflow-tooltip
                  >
                    <template slot-scope="{ row }">
                      <span style="color: #d9001b">
                        取：{{ row.reserveTakeStoreName }}
                      </span>
                      <span style="color: #dd5d1b">
                        还：{{ row.reserveAlsoStoreName }}
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="取车类型"
                    min-width="150"
                    align="center"
                    show-overflow-tooltip
                  >
                    <template slot-scope="{ row }">
                      <dict-tag
                        :options="dict.type.rental_type"
                        :value="row.rentalType"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="订单状态"
                    min-width="200"
                    align="center"
                    show-overflow-tooltip
                  >
                    <template slot-scope="{ row }">
                      <div>
                        <dict-tag
                          :options="dict.type.sys_order_status"
                          :value="row.orderStatus"
                        />
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
                <pagination
                  v-show="order.total > 0"
                  :total="order.total"
                  :page.sync="order.pageNum"
                  :limit.sync="order.pageSize"
                  @pagination="getOederList"
                />
              </el-col>
            </el-row>
            <el-row>
              <el-col
                :sm="24"
                v-if="checkPermi(['car:basic:maintenance'])"
              >
                <MmvTitle title="车辆保养记录"></MmvTitle>
              </el-col>
              <el-col
                :sm="24"
                class="table-padding"
                v-if="checkPermi(['car:basic:maintenance'])"
              >
                <el-table v-loading="loading" :data="maintenanceList" border>
                  <el-table-column
                    label="保养时公里数"
                    prop="currentMile"
                    min-width="120"
                    align="center"
                    show-overflow-tooltip
                  >
                    <template slot-scope="scope">
                      {{ scope.row.currentMile || '--' }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="保养费用"
                    prop="maintenanceFee"
                    min-width="120"
                    align="center"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    label="保养时间"
                    prop="maintenanceDate"
                    min-width="160"
                    align="center"
                    show-overflow-tooltip
                  >
                    <template slot-scope="scope">
                      <span>{{
                        parseTime(scope.row.maintenanceDate, '{y}-{m}-{d}') ||
                        '--'
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="记录人"
                    min-width="100"
                    align="center"
                    show-overflow-tooltip
                    prop="operator"
                  />
                </el-table>
                <pagination
                  v-show="maintenance.total > 0"
                  :total="maintenance.total"
                  :page.sync="maintenance.pageNum"
                  :limit.sync="maintenance.pageSize"
                  @pagination="getMaintenanceList"
                />
              </el-col>
            </el-row>
            <el-row>
              <el-col
                :sm="24"
                v-if="checkPermi(['car:basic:inspection'])"
              >
                <MmvTitle title="车辆年检记录"></MmvTitle>
              </el-col>
              <el-col
                :sm="24"
                class="table-padding"
                v-if="checkPermi(['car:basic:inspection'])"
              >
                <el-table v-loading="loading" :data="insuranceList" border>
                  <el-table-column
                    label="年检年份"
                    min-width="160"
                    align="center"
                    show-overflow-tooltip
                    prop="thisTimeInspectionTime"
                  >
                    <template slot-scope="scope">
                      <span>{{
                        scope.row.thisTimeInspectionTime | inspectionYear
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="年检时间"
                    min-width="180"
                    align="center"
                    show-overflow-tooltip
                    prop="thisTimeInspectionTime"
                  >
                    <template slot-scope="scope">
                      <span
                        >{{
                          parseTime(
                            scope.row.thisTimeInspectionTime,
                            '{y}-{m}-{d}'
                          ) || '--'
                        }}至{{
                          parseTime(
                            scope.row.nextInspectionTime,
                            '{y}-{m}-{d}'
                          ) || '--'
                        }}
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="年检费用"
                    min-width="120"
                    align="center"
                    show-overflow-tooltip
                    prop="inspectionAmount"
                  />
                  <el-table-column
                    label="年检处理人"
                    min-width="120"
                    align="center"
                    show-overflow-tooltip
                    prop="inspectionAgent"
                  />
                </el-table>
                <pagination
                  v-show="insurance.total > 0"
                  :total="insurance.total"
                  :page.sync="insurance.pageNum"
                  :limit.sync="insurance.pageSize"
                  @pagination="getListInspection"
                />
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="违章记录" v-if="checkPermi(['car:basic:ilegal'])">
            <el-row>
              <el-col :sm="24" >
                <MmvTitle title="违章记录"></MmvTitle>
              </el-col>
              <el-col :sm="24"  class="table-padding">
                <el-table v-loading="loading" :data="illegalList" border>
                  <el-table-column
                    label="违章单据号"
                    min-width="150"
                    align="center"
                    show-overflow-tooltip
                    prop="documentNo"
                  />
                  <el-table-column
                    label="违章时间"
                    min-width="160"
                    align="center"
                    show-overflow-tooltip
                    prop="illegalTime"
                  >
                    <template slot-scope="scope">
                      <span>{{ parseTime(scope.row.illegalTime) }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="违章地点"
                    min-width="180"
                    align="center"
                    show-overflow-tooltip
                    prop="illegalLocation"
                  />
                  <el-table-column
                    label="违章内容"
                    min-width="180"
                    align="center"
                    show-overflow-tooltip
                    prop="illegalDetail"
                  />
                  <el-table-column
                    label="扣分"
                    min-width="100"
                    align="center"
                    show-overflow-tooltip
                    prop="pointsDeduction"
                  />
                  <el-table-column
                    label="罚款金额"
                    min-width="100"
                    align="center"
                    show-overflow-tooltip
                    prop="illegalFines"
                  />
                  <el-table-column
                    label="处理状态"
                    min-width="100"
                    align="center"
                    show-overflow-tooltip
                    prop="processingStatus"
                    width="150"
                  >
                    <template slot-scope="{ row }">
                      {{
                        {
                          1: '未处理',
                          2: '已处理未缴费',
                          3: '已处理',
                          4: '已缴费未处理',
                        }[Number(row.processingStatus)]
                      }}
                    </template>
                  </el-table-column>
                </el-table>
                <pagination
                  v-show="illegal.total > 0"
                  :total="illegal.total"
                  :page.sync="illegal.pageNum"
                  :limit.sync="illegal.pageSize"
                  @pagination="getIllegalList"
                />
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="加油记录" >
            <el-row>
              <el-col :sm="24">
                <MmvTitle title="车辆加油记录"></MmvTitle>
              </el-col>
              <el-col :sm="24">
                <span>累计加油金额：￥{{recordCount || 0}}</span>
              </el-col>
              <el-col :sm="24"  style="margin-top: 5px;">
                <el-table v-loading="loading" :data="recordList" border>
                  <el-table-column
                    label="加油日期"
                    align="center"
                    prop="refuelingDate"
                    min-width="160"
                    :show-overflow-tooltip="true"
                  >
                    <template slot-scope="scope">
                      <span>{{ parseTime(scope.row.refuelingDate, '{y}-{m}-{d}') }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="使用油卡"
                    align="center"
                    prop="cardNo"
                    min-width="160"
                    :show-overflow-tooltip="true"
                  >
                    <template slot-scope="scope">
                      <span>{{ scope.row.cardNo || '--' }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="加油金额"
                    align="center"
                    prop="refuelingAmount"
                    min-width="160"
                    :show-overflow-tooltip="true"
                  >
                    <template slot-scope="scope">
                      ¥{{ scope.row.refuelingAmount }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="加油前公里数"
                    align="center"
                    prop="kilometers"
                    min-width="160"
                    :show-overflow-tooltip="true"
                  />
                  <el-table-column
                    label="加油人"
                    align="center"
                    prop="oiler"
                    min-width="160"
                    :show-overflow-tooltip="true"
                  />
                  <el-table-column
                    label="操作"
                    fixed="left"
                    align="center"
                    width="160"
                    class-name="small-padding fixed-width"
                  >
                    <template slot-scope="scope">
                      <el-button
                        size="small"
                        type="text"
                        @click="handleRefuelingDetail(scope.row)"
                      >查看
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <pagination
                  v-show="refueling.total > 0"
                  :total="refueling.total"
                  :page.sync="refueling.pageNum"
                  :limit.sync="refueling.pageSize"
                  @pagination="getRefuelingList"
                />
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </template>
      <template v-slot:footer>
        <div class="footer">
          <el-button type="info" plain @click.native="close">取消</el-button>
        </div>
      </template>
    </CustomContent>

    <el-dialog
      title="订单详情"
      :visible.sync="showOrderdetail"
      width="1100px"
      destroy-on-close
      append-to-body
    >
      <MmvOrderDetail
        ref="MmvOrderDetail"
        v-if="showOrderdetail"
        :orderNo="nowOrderNo"
      ></MmvOrderDetail>
      <div slot="footer">
        <el-button @click="showOrderdetail = false">关闭</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :title="titleRefueling"
      :visible.sync="openRefuelingDetail"
      width="800px"
      append-to-body
    >
      <el-row>
        <el-col :sm="24" :md="24" :lg="24" class="table-padding">
          <el-descriptions :column="2" border :labelStyle="{ width: '120px' }">
            <el-descriptions-item label-class-name="my-descriptions-label" >
              <template slot="label"> 车牌号</template>
              {{ refuelingForm.carNo }}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-descriptions-label" >
              <template slot="label"> 加油日期</template>
              {{ refuelingForm.refuelingDate }}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-descriptions-label" >
              <template slot="label"> 加油人</template>
              {{ refuelingForm.oiler }}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-descriptions-label" >
              <template slot="label"> 加油金额</template>
              ¥{{ refuelingForm.refuelingAmount }}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-descriptions-label" >
              <template slot="label"> 使用油卡</template>
              {{ refuelingForm.cardNo || '--' }}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-descriptions-label" >
              <template slot="label"> 加油前公里数</template>
              {{ refuelingForm.kilometers }}Km
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-descriptions-label"  span="2">
              <template slot="label"> 备注</template>
              {{ refuelingForm.remark }}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-descriptions-label" >
              <template slot="label">加油前油表照片</template>
              <el-image
                v-if="refuelingForm.photoOfBefore"
                :src="getImgUrl(refuelingForm.photoOfBefore)"
                :preview-src-list="[getImgUrl(refuelingForm.photoOfBefore)]"
                fit="contain"
                style="width: 120px"
              ></el-image>
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-descriptions-label" >
              <template slot="label">加油后油表照片</template>
              <el-image
                v-if="refuelingForm.photoOfAfter"
                :src="getImgUrl(refuelingForm.photoOfAfter)"
                :preview-src-list="[getImgUrl(refuelingForm.photoOfAfter)]"
                fit="contain"
                style="width: 120px"
              ></el-image>
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-descriptions-label" >
              <template slot="label">加油小票</template>
              <el-image
                v-if="refuelingForm.refuelingTicket"
                :src="getImgUrl(refuelingForm.refuelingTicket)"
                :preview-src-list="[getImgUrl(refuelingForm.refuelingTicket)]"
                fit="contain"
                style="width: 120px"
              ></el-image>
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="openRefuelingDetail=false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import MmvTitle from '@/components/MmvUI/MmvTitle.vue'
import MmvOrderDetail from '@/views/order/orderBasic/detail.vue'
import { getInfo } from '@/api/car/car_basic'
import { index } from '@/api/order'
import { listRepairMaintain } from '@/api/car/repairMaintain'
import { listIllegal } from '@/api/car/illegal'
import { listInspectionAll } from '@/api/maintenance/inspection'
import { checkPermi } from '@/utils/permission'
import CustomContent from '@/components/custom/content.vue'
import {countRecord, getRecord, listRecord} from "@/api/car/refuelingRecord";
export default {
  name: 'carsave',
  dicts: [
    'car_status',
    'car_color',
    'accident_level',
    'car_accessories',
    'memberType',
    'sys_order_source',
    'sys_order_status',
    'rental_type',
    'manufacturer',
    'equipmentModel',
    'repair_status',
    'repair_type',
  ],
  components: {
    MmvTitle,
    MmvOrderDetail,
    CustomContent,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      //车辆订单
      order: {
        total: 0,
        pageNum: 0,
        pageSize: 5,
      },
      orderlist: [],
      nowOrderNo: null,
      showOrderdetail: false, // 显示订单详情

      //年检记录
      insurance: {
        total: 0,
        pageNum: 0,
        pageSize: 5,
      },
      insuranceList: [],

      //出检记录
      repair: {
        total: 0,
        pageNum: 0,
        pageSize: 5,
      },
      repairList: [],

      //违章记录
      illegal: {
        total: 0,
        pageNum: 0,
        pageSize: 5,
      },
      illegalList: [],

      //保养记录
      maintenance: {
        total: 0,
        pageNum: 0,
        pageSize: 5,
      },
      maintenanceList: [],
      recordList:[],
      // 表单参数
      form: {
        drivingLicenseImgBack: null,
        drivingLicenseImgFront: null,
      },
      refueling:{
        total: 0,
        pageNum: 0,
        pageSize: 5,
      },
      refuelingForm :{},
      openRefuelingDetail : false,
      titleRefueling :'',
      recordCount:0
    }
  },
  filters: {
    inspectionYear(date) {
      if (date) {
        return new Date(date).getFullYear() || '--'
      }
      return '--'
    },
  },
  created() {
    this.handleUpdate(this.$route.query.id)
  },
  methods: {
    //加油记录
    getRefuelingList() {
      this.loading = true
      this.param = {
        ...this.refueling,
        carId: this.form.id
      }
      listRecord(this.param).then((response) => {
        this.recordList = response.rows
        this.refueling.total = response.total
        this.loading = false
      })
      countRecord(this.param).then((response) => {
        this.recordCount = response.data
      })
    },
      /** 加油查看 */
      handleRefuelingDetail(row) {
        const id = row.id || this.ids
        getRecord(id).then((response) => {
          this.refuelingForm = response.data
          this.openRefuelingDetail = true
          this.titleRefueling = '加油记录详情'
        })
      },
    checkPermi,
    /** 查询车辆订单列表 */
    getOederList() {
      this.loading = true
      let param = {
        ...this.order,
        carNo: this.form.carNo,
      }
      index(param).then((response) => {
        this.orderlist = response.rows
        this.order.total = response.total
        this.loading = false
      })
    },
    /** 查询车辆订单详情 */
    handleOrderDetail(row) {
      this.nowOrderNo = row.orderNo
      this.$router.push({
        path: '/orderBasic/detail',
        query: { orderNo: row.orderNo }
      })
    },
    /** 查询车辆维保列表 */
    getRepairList() {
      this.loading = true
      let param = {
        ...this.repair,
        carPlateNo: this.form.carNo,
        type: 2,
      }
      listRepairMaintain(param).then((response) => {
        this.repairList = response.rows
        this.repair.total = response.total
        this.loading = false
      })
    },
    /** 查询车辆年检列表 */
    getListInspection() {
      this.loading = true
      let param = {
        ...this.insurance,
        carNo: this.form.carNo,
      }
      listInspectionAll(param).then((response) => {
        this.insuranceList = response.rows
        this.insurance.total = response.total
        this.loading = false
      })
    },
    /** 查询车辆违章列表 */
    getIllegalList() {
      this.loading = true
      let param = {
        ...this.illegal,
        carNo: this.form.carNo,
      }
      listIllegal(param).then((response) => {
        this.illegalList = response.rows
        this.illegal.total = response.total
        this.loading = false
      })
    },
    /** 查询车辆保养记录 */
    getMaintenanceList() {
      this.loading = true
      let param = {
        ...this.maintenance,
        carPlateNo: this.form.carNo,
        type:1
      }
      listRepairMaintain(param).then((response) => {
        this.maintenanceList = response.rows
        this.maintenance.total = response.total
        this.loading = false
      })
    },
    close() {
      // 关闭页面
      this.reset()
      this.$router.go(-1)
      this.$store.dispatch('tagsView/delView', this.$route)
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        carBrandId: null,
        carSeriesId: null,
        carModelId: null,
        belongingStoreId: null,
        locatedStoreId: null,
        carNo: null,
        carBrandName: null,
        carSeriesName: null,
        vinNo: null,
        engineNo: null,
        carModelName: null,
        storeName: null,
        carStatus: '1',
        carColor: null,
        drivingLicenseImgFront: null,
        drivingLicenseImgBack: null,
        drivingLicenseValidityDate: null,
        accessoryItems: null,
        accessoryItemsName: null,
        accessoryItemArray: [],
        accessoryItemsNameArray: [],
        delFlag: null,
        repairStatus: 0,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        maintenanceCycle: null,
        tenantId: null,
      }
      this.resetForm('form')
    },

    /** 编辑按钮操作 */
    handleUpdate(pid) {
      this.reset()
      const id = pid || this.ids
      getInfo(id).then((response) => {
        this.form = response.data.carBasic
        this.getOederList()
        this.getRefuelingList()
        if (checkPermi(['car:basic:ilegal'])) {
          //车辆违章
          this.getIllegalList()
        }
        if (checkPermi(['car:basic:repair'])) {
          //车辆维保
          this.getRepairList()
        }
        if (checkPermi(['car:basic:inspection'])) {
          //车辆年检
          this.getListInspection()
        }
        if (checkPermi(['car:basic:maintenance'])) {
          //车辆保养
          this.getMaintenanceList()
        }

        // 车辆维修	car:basic:repair
        // 车辆保险	car:basic:insurance
      })
    },
  },
}
</script>
